<template>
    <Modal title="告警消息"
        v-model="modalShow"
        @on-ok="save"
        @on-cancel="cancel"
        :auto-close="false"
        :mask-closable="false">
        <div class="alarm-detail-wrapper">
            <Form ref="form" :model="alarm" :grid="1" :label-width="90" label-position="right" :rules="validateRules" v-if="alarm">
                <Form-item label="消息名称" prop="title">
                    <span>{{alarm.title | text}}</span>
                </Form-item>
                <Form-item label="消息内容" prop="messageContent">
                    <div v-if="alarm.messageContent.length && alarm.messageContent.length > 32" class="content">{{alarm.messageContent | text}}</div>
                    <div v-else>{{alarm.messageContent | text}}</div>
                </Form-item>
                <Form-item label="处理内容" prop="disposeContent">
                    <Input placeholder="项目描述" clearable type="textarea" class="normal-input-area" :rows="3" v-model="alarm.disposeContent"></Input>
                </Form-item>
            </Form>
        </div>
    </Modal>
</template>

<script>
import util     from 'util'
import getData  from 'getData'
export default {
    data () {
        return {
            alarm: false,
            modalShow: false,
            validateRules: {
                disposeContent: [{
                    required: true,
                    message: "请输入处理内容！"
                }]
            },
        }
    },

    methods: {
        cancel() {
            this.$refs.form.resetFields();
            this.modalShow = false;
        },
        save() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    var reqData = {
                        alarmId: this.alarm.relationId,
                        messageId: this.alarm.id,
                        disposeContent: this.alarm.disposeContent
                    };
                    getData.post('dealSysMsg', reqData).then(res => {
                        if (res.status == 200 && res.data.code == '000') {
                            this.$Message.success('处理告警消息成功!');
                            this.$emit('refresh');
                            this.cancel();
                        }
                    });
                }
            })
        },
        show(alarm) {
            if (alarm) {
                this.alarm = util.util.cloneObj(alarm);
            }
            this.modalShow = true;
        }
    }
}
</script>

<style lang="less">
.alarm-detail-wrapper {
    .content {
        padding: 0 8px;
        max-width: 398px;
        max-height: 200px;
        overflow: auto;
        word-wrap:break-word;
        border: 1px solid #dcdee2;
    }
    .ivu-form-item {
        margin-bottom: 8px;
    }
}
</style>
